package com.example.amap.ui.map.ui.page

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.amap.ui.map.ui.style.buttonModifier

@Preview
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PageMain(onSearchBarClick: () -> Unit = {}) {
    Box(
        modifier = Modifier
            .width(380.dp)
    ) {
        BottomSheetScaffold(
            sheetContent = {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.TopCenter
                ) {
                    SearchBar(onSearchBarClick)
                }
            },
            sheetPeekHeight = 100.dp,
            sheetShape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp),
            sheetDragHandle = {
                Surface(
                    modifier = Modifier
                        .padding(vertical = 12.dp),
                    color = Color.Gray,
                    shape = MaterialTheme.shapes.extraLarge
                ) {
                    Box(
                        Modifier
                            .size(
                                width = 64.dp,
                                height = 4.dp
                            )
                    )
                }
            }
        ) {}
    }
}

@Composable
private fun SearchBar(onSearchBarClick: () -> Unit = {}) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .size(350.dp, 50.dp)
            .buttonModifier()
            .padding(horizontal = 8.dp)
            .clickable { onSearchBarClick() }
    ) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = null,
            modifier = Modifier.size(32.dp)
        )

        Text(text = "请输入搜索内容", modifier = Modifier.padding(8.dp), color = Color.Gray)
    }
}